<template>
  <div class="home">
    <van-field
      v-model="name"
      label="姓名"
      placeholder="未填写"
      input-align="right"
      readonly
      right-icon="arrow"
      @click="onNameTrue"
    />
    <div :class="nameShow ? 'nameInp' : 'nameInpHide'">
      <div class="name-div">
        <p class="center">
          填写姓名
        </p>
        <div class="form">
          <input v-model="nameInput" class="inputName" />
        </div>
        <div class="maskBtn">
          <button class="confirmBtn" @click="onNameSub">
            确定
          </button>
          <button class="cancelBtn" @click="onNameCancel">
            取消
          </button>
        </div>
      </div>
    </div>
    <van-field
      readonly
      label="性别"
      clickable
      :value="sex"
      placeholder="未填写"
      @click="showPicker = true"
      right-icon="arrow"
      input-align="right"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-field
      readonly
      label="生日"
      label-width="2rem"
      clickable
      :value="birthday"
      placeholder="生日享好礼，选择后不可更改"
      @click="dataSelectShow = true"
      right-icon="arrow"
      input-align="right"
    />
    <van-popup v-model="dataSelectShow" position="bottom">
      <van-datetime-picker
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="dataSelectShow = false"
        @confirm="birthdayConfirm"
      />
    </van-popup>
    <van-field
      v-model="address"
      label="地址"
      placeholder="未填写"
      input-align="right"
      right-icon="arrow"
      readonly
      @click='addressSelect'
    />
    <div class="paddingDiv">
      <van-button
        plain
        color="#353e45"
        type="primary"
        class="subbtn"
        @click="onSub"
        >返回</van-button
      >
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { editUserInfo, getUserInfo } from "@/api/index";
import { Toast } from "vant";
import { getToken } from "@/utils/public.js";
export default {
  name: "vip",
  components: {},
  data() {
    return {
      name: "",
      address: "",
      birthday: "",
      sex: "",
      columns: ["男", "女"], //性别
      showPicker: false,
      dataSelectShow: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      nameInput: "",
      nameShow: false
    };
  },
  methods: {
    onSub() {
      let { name, sex, birthday, address } = this;
      sex = sex == "男" ? 1 : 2;
      editUserInfo({ name, sex, birthday, address }).then(res => {
        console.log(res);
      });
    },
    onConfirm(value) {
      this.sex = value;
      this.showPicker = false;
    },
    onCancel() {
      this.sex = "";
    },
    birthdayConfirm(data) {
      this.birthday = this.dayjs(data).format("YYYY-MM-DD");
      this.dataSelectShow = false;
    },
    onNameSub() {
      if (this.nameInput == "") {
        Toast({ position: "bottom", message: "姓名不能为空" });
        return;
      }
      this.name = this.nameInput;
      this.nameShow = false;
    },
    //名字取消按钮
    onNameCancel() {
      this.nameInput = "";
      this.nameShow = false;
    },
    //点击名字得输入框
    onNameTrue() {
      this.nameInput = this.name;
      this.nameShow = true;
    },
    getInfo() {
      getUserInfo().then(res => {
        if (res.status == 200) {
          this.name = res.data.data.name;
          this.sex = res.data.data.sex
            ? res.data.data.sex == 1
              ? "男"
              : "女"
            : "";
          this.birthday = Array.isArray(res.data.data.birthday)
            ? res.data.data.birthday.split(" ")[0]
            : "";
          this.address = res.data.data.address;
          console.log(res.data);
        }
      });
    },
    addressSelect(){
      this.$router.push('/address')
      console.log(1)
    }
  },
  created() {
    // getToken();
    this.getInfo();
  }
};
</script>
<style lang="" scoped>
.home {
  width: 100%;
  height: 100%;
}
.paddingDiv {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
.subbtn {
  width: 200px;
  margin-top: 20px;
  border: 1px solid #373737;
  color: #373737;
}
.van-picker__toolbar {
  border-bottom: 1px solid #ebebeb;
}

.nameInp {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  position: fixed;
  top: 0;
  display: block;
}
.nameInpHide {
  display: none;
}
.name-div {
  width: 250px;
  height: 180px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.center {
  text-align: center;
  width: 100%;
  height: 35px;
  border-bottom: 1px solid #e4e4e4;
  margin-top: 5px;
}

.form {
  padding: 5px 20px;
  box-sizing: border-box;
  flex: 1;
}

.inputName {
  border: 1px solid #eaeaea;
  background: #fff;
  height: 30px;
  font-size: 12px;
  width: 100%;
}

.maskBtn {
  display: flex;
  margin-top: 20px;
  width: 100%;
  height: 40px;
}
.confirmBtn {
  flex: 1;
  outline: none;
  border: none;
  color: #ef3451;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.cancelBtn {
  flex: 1;
  outline: none;
  border: none;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}
</style>
